<template>
	<view>
		<view class="Header-search">
			<!-- 返回 -->
			<view class="left-back" @click="TapBack">
				<!-- #ifndef APP-NVUE -->
				<u-icon name="fanhui1" custom-prefix="custom-icon" size="50" color="#000"></u-icon>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE || APP-PLUS-NVUE -->
				<view class="icons-back">
					<text class="icons-back-text nvueiconfont">&#xe682;</text>
				</view>
				<!-- #endif -->
			</view>
			<!-- 搜索栏 -->
			<view class="search-box">
				<view class="search-radius">
					<!-- 左边搜索图标 -->
					<view class="left-icons">
						<!-- #ifndef APP-NVUE -->
						<u-icon name="sousuo3" custom-prefix="custom-icon" size="30" color="#000"></u-icon>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE || APP-PLUS-NVUE -->
						<view class="soku icons">
							<text class="soku-text nvueiconfont">&#xe606;</text>
						</view>
						<!-- #endif -->
					</view>
					<!-- 中间输入框 -->
					<view class="search-input">
						<input  :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input" :class="{'center':!active && mode === 2}" :focus="isFocus" v-model="inputVal" @focus="focus" @blur="blur"/>
						<!-- 当输入框有内容的时候，显示“X”清空icon图标 -->
						<view class="icons qingkong" v-if="isDelShow" @click.stop="clear">
							<!-- @click换成@click.stop阻止冒泡 -->
							<!-- <text class="icon icon-del"  @click.stop="clear"></text> -->
							<!-- #ifndef APP-NVUE -->
							<u-icon name="qingkong" custom-prefix="custom-icon" size="40" color="#000"></u-icon>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE || APP-PLUS-NVUE -->
							<view class="qingkong-icon icons">
								<text class="qingkong-icon-text nvueiconfont">&#xe693;</text>
							</view>
							<!-- #endif -->
						</view>
					</view>
					<!-- 右边语音搜索图标 -->
					<view class="right-icons" @click="TapSpeechEngine">
						<!-- 语音搜索只在APP，其他端没有如h5 微信内没有对应的SDK -->
						<!-- #ifdef APP-NVUE || APP-PLUS-NVUE -->
						<view class="yuyisosuo icons">
							<text class="yuyisosuo-text nvueiconfont">&#xe6ce;</text>
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<!-- 搜索按钮 -->
			<view class="search-btn-right" @click="search">
				<text class="soku-btn-text">搜索</text>
			</view>
			<!-- 小程序胶囊 -->
			<!-- #ifdef MP -->
			<view class="MP" :style="[{'dispaly':'flex'},{'width':MPmenuButtonInfoWidth+'px'}]">
				<!-- 小程序胶囊宽度 -->
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	// #ifdef MP
	// 获取小程序胶囊信息 [小程序专用api]
	var menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	//console.log(menuButtonInfo)
	// #endif
	export default {
		name:"FatFatMeng-NVUE-Search",
		props: {
			mode: {
				value: Number,
				default: 1
			},
			//HM修改 定义默认搜索关键词(水印文字)
			placeholder:{
				value: String,
				default: '请输入搜索内容'
			},
			value: {
				type: String,
				default:false
			},
			button: {
				value: String,
				default: 'outside'
			},
			show: {
				value: Boolean,
				default: true
			},
			radius: {
				value: String,
				default: 60
			},
			// 获取焦点
			isFocus: {
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				// #ifdef MP
				// 小程序胶囊菜单按钮的宽度
				MPmenuButtonInfoWidth:uni.getMenuButtonBoundingClientRect().width,
				MPmenuButtonInfoHeight:uni.getMenuButtonBoundingClientRect().height,
				// #endif
				active: false,
				inputVal: '',
				searchName: '取消',
				isDelShow: false,
				isFocusData: this.isFocus//获取焦点
			};
		},
		watch: {
			inputVal(newVal) {
				if (newVal) {
					this.searchName = '搜索';
					//this.isDelShow = true; //直接点击页面预设关键字样式异常，注销
				} else {
					this.searchName = '取消';
					this.isDelShow = false;
				}
			},
			// 双向绑定
			value(val) {
				this.inputVal = val;
			}
		},
		methods: {
			// 后退上一页
			TapBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 语音搜索
			TapSpeechEngine() {
				this.$emit('change')
			},
			// 触发组件confirm事件
			triggerConfirm(){
				this.$emit('confirm', false);
			},
			// 触发组件input事件
			inputChange(event){
				var keyword = event.detail.value;
				this.$emit('input', keyword);
				if (this.inputVal) {
					this.isDelShow = true;
				}
			},
			focus() {
				this.active = true;
				//HM修改 增加获取焦点判断
				if (this.inputVal) {
					this.isDelShow = true;
				}
			},
			blur() {
				console.log('blur');
				this.isFocusData = false;
				if (!this.inputVal) {
					this.active = false;
				}
				//this.$emit('input', '');
			},
			clear() {
				//HM修改 收起键盘
				uni.hideKeyboard();
				this.isFocusData = false;
				this.inputVal = '';
				this.active = false;
				// 清空内容时候触发组件input
				this.$emit('input', '');
				//this.$emit('search', '');// 清空内容时候不进行搜索
				
			},
			getFocus() {
				if(!this.isFocusData){
					this.isFocusData = true;
				}
				
			},
			search() {
				// 增加点击取消时候退出输入状态，内容为空时，输入默认关键字
				if (!this.inputVal) {
					if(!this.show&&this.searchName == '取消'){
						uni.hideKeyboard();
						this.isFocusData = false;
						this.active = false;
						return;
					}
				}
				console.log(this.inputVal); 
				this.$emit('search', this.inputVal?this.inputVal:this.placeholder);
			}
		}
		
		
	}
</script>

<style lang="scss" scoped>
	@import './NVUE-search.scss';
</style>
